<template>
	<view class="pageBox">
		<image src="http://www.bobei.shop/static/third/loginBg.png" mode="aspectFit" class="loginBg"
			:style="{position: 'absolute', left: 0, top: statusBarHeight + 'px', zIndex: 1}"></image>
		<view class="content">
			<view :style="{height: statusBarHeight +'px' }"></view>
			<view class="welcome">WELCOM YOU</view>
			<view class="helloBox">
				<view class="helloItem">
					您好，
				</view>
				<view class="helloItem">
					伯贝商城欢迎您
				</view>
			</view>

			<view class="main">
				<view class="titleBox flex-row">
					<view class="title">
						欢迎登录
					</view>
					<view class="triangle"></view>
				</view>

				<view v-if="!passLogin">
					<view class="iptBox flex-between">
						<input class="ipt" type="text" placeholder="请输入手机号码" v-model="form.account">
					</view>

					<view class="iptBox flex-between">
						<input class="ipt" type="text" placeholder="请输入验证码" v-model="form.captcha">
						<button class="captchaBtn" :plain="true"
							@click="sendMsg()">{{sendVerifyLoad?`${downTime}S`:'获取验证码'}}</button>
					</view>

					<view class="loginWay flex">
						<button class="wayBtn" :plain="true" @click="onPassLogin">密码登录</button>
					</view>

				</view>

				<view v-if="passLogin">
					<view class="iptBox flex-between">
						<input class="ipt" type="text" placeholder="请输入手机号码" v-model="form.account">
					</view>
					<view class="iptBox flex-between">
						<input class="ipt" type="text" placeholder="请输入登录密码" v-model="form.password" v-if="type == 'text'">
						<input class="ipt" type="password" placeholder="请输入登录密码" v-model="form.password" v-if="type == 'password'">
						<image class="eyes" src="http://www.bobei.shop/static/login/eyes.png" mode=""
							v-if="type == 'text'" @click="type = 'password'"></image>
						<image class="eyes" src="http://www.bobei.shop/static/login/eyes2.png" mode=""
							v-if="type == 'password'" @click="type = 'text'"></image>
					</view>
					<view class="loginWay flex">
						<button class="wayBtn" :plain="true" @click="onPassLogin">验证码登录</button>
					</view>
				</view>

				<view class="tips flex-center">
					请你妥善保管好自己的登陆密码，防止信息造成泄漏
				</view>

				<button class="loginBtn" :plain="true" @click="onLoginBtn">登录</button>

				<view class="noBox flex-center">
					<view class="noText">
						没有帐号？去
					</view>
					<button class="regBtn" :plain="true" @click="goRegister">注册账号</button>
					<view class="line"></view>
					<button class="forgetBtn" :plain="true" @click="goForget">忘记密码？</button>
				</view>

				<view class="agree flex-center">
					<image class="checkIcon" src="http://www.bobei.shop/static/third/checkIcon.png" mode=""
						v-if="!checked" @click="checked = true"></image>
					<image class="checkIcon" src="http://www.bobei.shop/static/third/checkedIcon.png" mode=""
						v-if="checked" @click="checked = false"></image>
					<view class="agreeText">
						登录即同意
					</view>
					<button class="agreement" :plain="true"
						@click.stop="goAbout('/setting/about?name=service_agreement&title=用户协议')">《用户协议》</button>
					<view class="agreeText">
						和
					</view>
					<button class="agreement" :plain="true"
						@click.stop="goAbout('/setting/about?name=privacy_policy&title=隐私协议')">《隐私协议》</button>
				</view>

				<view class="others flex-around">
					<view class="leftLine"></view>
					<view class="othersText">
						其它方式登录
					</view>
					<view class="rightLine"></view>
				</view>

				<view class="bomBox flex-around">
					<view class="bomItem flex-center" @click="goHome">
						<image src="http://www.bobei.shop/static/third/goHome.png" mode="scaleToFill" class="goHome">
						</image>
						<view class="bomTitle">
							返回首页
						</view>
					</view>
					<!--  #ifdef  APP-PLUS -->
					<view class="bomItem flex-center" @click="wechatLogin">
						<image src="http://www.bobei.shop/static/third/wechatLogin.png" mode="scaleToFill"
							class="goHome"></image>
						<view class="bomTitle">
							微信登录
						</view>
					</view>
					<!--  #endif -->

					<!--  #ifdef  H5 -->
					<view class="bomItem flex-center" @click="onDownloadBtn">
						<image src="http://www.bobei.shop/static/third/logoIcon.png" mode="scaleToFill"
							class="logoIcon"></image>
						<view class="bomTitle">
							伯贝下载
						</view>
					</view>
					<!--  #endif -->

				</view>



			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",
				form: {
					account: "",
					captcha: "",
					password: "",
				},
				type: "password",
				passLogin: false,
				checked: false,

				sendVerifyLoad: "",
				downTime: 60,

				download: {},
			}
		},

		onShow() {
			this.statusBarHeight = this.$mySysInfo().top;
			// #ifdef  H5
			this.getDownload()
			// #endif
		},

		methods: {
			sendMsg() {
				if (!this.form.account) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (this.sendVerifyLoad) {
					uni.showToast({
						title: `请等待${this.downTime}s后继续操作`,
						icon: "none",
						duration: 1500,
					})
					return
				}
				this.sendVerifyLoad = true
				this.$post({
					module: 'Account',
					interface: 1005,
					data: {
						account: this.form.account
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
					let time = setInterval(() => {
						this.downTime--;
						if (this.downTime <= 0) {
							this.downTime = 60;
							this.sendVerifyLoad = false;
							clearTimeout(time);
						}
					}, 1000);
				}).catch(() => {
					this.sendVerifyLoad = false
				})
			},
			onLoginBtn() {
				if (this.passLogin) { // 为真 密码登录
					if (!this.form.account) {
						uni.showToast({
							icon: "none",
							title: "请输入手机号码",
							duration: 1000
						})
						return;
					}
					if (!this.form.password) {
						uni.showToast({
							icon: "none",
							title: "请输入登录密码",
							duration: 1000
						})
						return;
					}

					if (!this.checked) {
						uni.showToast({
							title: '请阅读并同意后勾选《用户协议》和《隐私协议》',
							icon: "none"
						})
						return
					}

					this.$post({
						module: 'Account',
						interface: 1000,
						data: this.form
					}).then(res => {
						// console.log(res);

						uni.setStorageSync('token', res.accessToken)
						uni.showToast({
							icon: "none",
							title: "登录成功",
							duration: 1000
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1000)
					})

				} else { // 验证码登录
					// console.log("验证码登录")
					if (!this.form.account) {
						uni.showToast({
							icon: "none",
							title: "请输入手机号码",
							duration: 1000
						})
						return;
					}
					if (!this.form.captcha) {
						uni.showToast({
							icon: "none",
							title: "请输入验证码",
							duration: 1000
						})
						return;
					}

					if (!this.checked) {
						uni.showToast({
							title: '请阅读并同意后勾选《用户协议》和《隐私协议》',
							icon: "none",
							duration: 1500,
						})
						return
					}
					this.$post({
						module: 'Account',
						interface: 1000,
						data: this.form
					}).then(res => {
						// console.log(res);

						uni.setStorageSync('token', res.accessToken)
						uni.showToast({
							icon: "none",
							title: "登录成功",
							duration: 1000
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1000)
					})
				}
			},
			onPassLogin() {
				this.passLogin = !this.passLogin;
				this.form.account = "";
				this.form.captcha = "";
				this.form.password = "";
			},
			goRegister() {
				uni.navigateTo({
					url: "/pages/login/register"
				})
			},
			goForget() {
				uni.navigateTo({
					url: "/pages/login/forget"
				})
			},
			goAbout(url) {
				uni.navigateTo({
					url: url
				})
			},
			goHome() {
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			onDownloadBtn() {
				uni.getSystemInfo({
					success: (params) => {
						// console.log(params, "系统")
						switch (params.osName) {
							case 'android':
								// // console.log('运行Android上')
								window.location.href = this.download.appUrl
								break;
							case 'ios':
								// // console.log('运行iOS上')
								// window.location.href = this.download.iosUrl
								uni.showToast({
									title: '开发中',
									icon: 'none',
									duration: 1500
								});
								break;
						}
					}
				})
			},
			getDownload() {
				this.$post({
					module: 'Utils',
					interface: 1003,
				}).then(res => {
					this.download = res;
				})
			},
			wechatLogin() {
				// 跳转完善个人资料页面
				// uni.navigateTo({
				// 	url: "/setting/improveData"
				// })
				let that = this;
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						// console.log("微信登录:", event)
						const {
							code
						} = event
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						that.$post({
							module: 'Wechat',
							interface: 1002,
							data: {
								code: event.code,
							},
						}).then(res => {
							// console.log("微信APP登录:", res)
							uni.setStorageSync('token', res.accessToken)
							uni.showToast({
								icon: "none",
								title: "登录成功",
								duration: 1000
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home/index'
								})
							}, 1000)
						}).catch((error) => {
							// console.log("微信登录传code报错",error)
						})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
						// console.log("登录授权失败err:", err);
					}
				})
			},
		},

	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background: linear-gradient(180deg, #EC615C 0%, #FFFFFF 100%);
		position: relative;

		.loginBg {
			width: 100%;
			transform: rotate(180deg);
		}

		.content {
			position: relative;
			z-index: 2;
			padding: 112rpx 0 0;

			.welcome {
				font-size: 72rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 84rpx;
				-webkit-box-reflect: below -30% -webkit-linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .8)); // 倒影
				padding-left: 46rpx;
			}

			.helloBox {
				margin-top: 20rpx;
				padding-left: 46rpx;

				.helloItem {
					font-size: 56rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 66rpx;
				}
			}

			.main {
				height: 1200rpx;
				background: rgba(255, 255, 255, 0.2);
				border: 4rpx solid #FFFFFF;
				border-radius: 16rpx 16rpx 0 0;
				margin-top: 42rpx;

				.titleBox {
					margin: 66rpx 0 40rpx 60rpx;

					.title {
						font-size: 36rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #000000;
						line-height: 42rpx;
					}

					.triangle {
						width: 0;
						height: 0;
						border-top: 10rpx solid #000000;
						border-right: 10rpx solid transparent;
						border-left: 10rpx solid transparent;
						margin-left: 16rpx;
					}
				}

				.iptBox {
					width: 630rpx;
					height: 100rpx;
					background: rgba(255, 255, 255, 0.7);
					border-radius: 50rpx;
					margin: 0 auto 24rpx;
					padding: 0 50rpx;

					.ipt {
						flex: 1;
						font-size: 24rpx;
						font-weight: normal;
						font-family: PingFang SC-Semibold, PingFang SC;
						color: #999999;
						line-height: 28rpx;
						outline: none;
						border: none;
						background-color: transparent;
					}

					.captchaBtn {
						font-size: 20rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: normal;
						color: #F2615F;
						line-height: 23rpx;
						background-color: transparent;
						border-radius: 23rpx 23rpx 23rpx 23rpx;
						border: 2rpx solid #F2615F;
						white-space: nowrap;
						padding: 4rpx 16rpx 2rpx;
						margin: 0;
					}

					.eyes {
						width: 40rpx;
						height: 40rpx;
					}

				}

				.loginWay {
					justify-content: flex-end;
					padding-right: 60rpx;

					.wayBtn {
						padding: 0;
						margin: 0;
						font-size: 24rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: normal;
						color: #999999;
						line-height: 28rpx;
						border: none;
					}
				}
			}

			.tips {
				font-size: 24rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: normal;
				color: #999999;
				line-height: 28rpx;
				margin-top: 38rpx;
			}

			.loginBtn {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 33rpx;
				width: 480rpx;
				height: 80rpx;
				background: #EC615C;
				border-radius: 40rpx;
				padding: 0;
				margin: 74rpx auto 0;
				border: none;
			}

			.noBox {
				margin-top: 24rpx;

				.noText {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: normal;
					color: #000000;
					line-height: 28rpx;
				}

				.regBtn {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #EC615C;
					line-height: 33rpx;
					background: transparent;
					padding: 0;
					margin: 0;
					border: none;
				}

				.line {
					width: 2rpx;
					height: 18rpx;
					background-color: #A1AAB4;
					margin: 0 20rpx;
				}

				.forgetBtn {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #120C45;
					line-height: 33rpx;
					background: transparent;
					padding: 0;
					margin: 0;
					border: none;
				}
			}

			.agree {
				margin-top: 80rpx;

				.checkIcon {
					width: 44rpx;
					height: 44rpx;
				}

				.agreeText {
					font-size: 24rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: normal;
					color: #CBCBCB;
					line-height: 28rpx;
				}

				.agreeText:nth-of-type(1) {
					margin-left: 16rpx;
				}

				.agreeText:nth-of-type(2) {
					margin-left: 24rpx;
				}

				.agreement {
					font-size: 24rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: normal;
					color: #F2615F;
					line-height: 28rpx;
					border: none;
					padding: 0;
					margin: 0;
				}

				.agreement:nth-of-type(1) {
					margin-left: 20rpx;
				}

				.agreement:nth-of-type(2) {
					margin-left: 4rpx;
				}
			}

			.others {
				margin-top: 82rpx;

				.leftLine {
					width: 178rpx;
					height: 2rpx;
					background: linear-gradient(270deg, rgba(192, 192, 192, 1), rgba(0, 0, 0, 0));
				}

				.othersText {
					font-size: 20rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: normal;
					color: #ACB8C1;
					line-height: 23rpx;
				}

				.rightLine {
					width: 178rpx;
					height: 2rpx;
					background: linear-gradient(90deg, rgba(192, 192, 192, 1), rgba(0, 0, 0, 0));
				}
			}

			.bomBox {
				margin: 24rpx auto 0;

				.bomItem {
					flex-direction: column;

					.goHome {
						width: 72rpx;
						height: 72rpx;
					}

					.logoIcon {
						width: 64rpx;
						height: 72rpx;
					}

					.bomTitle {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 28rpx;
						margin-top: 20rpx;
					}
				}
			}

		}
	}
</style>
